<template>
    <!-- 地址管理页面 -->
    <view class="viewport">
      <!-- 地址列表 -->
      <scroll-view  scroll-y>
        <view class="address">
          <!-- 按组使用 -->
          <uni-swipe-action>
            <uni-swipe-action-item
              v-for="item in addressList"
              :key="item.id"
              class="swipe-cell"
          
            >
              <view class="item" @click="getaddress(item)">
                <view class="user">
                  {{ item.receiver }}
                  <text>{{ item.contact }}</text>
                  <text v-if="item.isDefault === 1" class="badge"> 默认 </text>
                </view>
                <view class="locate">
                  {{ item.fullLocation }}{{ item.address }}
                </view>
                <!--  添加阻止冒泡 -->
                <!-- 点击修改跳转到表单页面,传递id作为参数到onLoad生命周期函数中 -->
                <navigator
                  :url="`./form?id=${item.id}`"
                  class="edit"
                  hover-class="none"
                >
                  修改
                </navigator>
              </view>
              <template v-slot:right>
                <view class="swipe-cell-action">
                  <button @tap="onAddressRemove(item.id)" class="delete-button">
                    删除
                  </button>
                </view>
              </template>
            </uni-swipe-action-item>
          </uni-swipe-action>
        </view>
      </scroll-view>
      <!-- 添加按钮 -->
      <view class="add-btn">
        <navigator hover-class="none" url="./form">新建地址</navigator>
      </view>
    </view>
  </template>

<script>
// 接口
import {getmemberaddress,delmemberaddress} from '@/api/address'
export default {
    data(){
        return{
              // 地址列表
      addressList: [],
      // 滑动菜单
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#dd524d",
          },
        },
      ],
        }
    },
    // 每次添加地址点击完成都会跳转到列表页面，在列表页面就要重新获取到最新添加的地址
    // 所以如果使用onLoad只会获取到一次,使用onShow,每一次访问当前页面都会获取最新数据
    onShow(){
this.getmemberaddress()
    },
    methods:{
        // 获取地址列表
       async getmemberaddress(){
        const res = await getmemberaddress()
       
        this.addressList=res.result
        },
            // 删除地址
    // 点击删除会传入当前地址的id数据
   async onAddressRemove(id){
    // 询问用户
    // uni的api会返回一个数组,数组的第一个元素为错误对象,第二个元素为数据本身
    // 结构出第二个元素的confirm属性,通过confirm属性的值判断当前用户点击的按钮
   const [err,{confirm}]= await uni.showModal({
      title:'删除地址',
      content:'您确定要删除吗'
    })

    // 如果用户点击确定,调用删除地址接口
    if(confirm){
         // 根据id作为参数调用删除接口
  const res = await delmemberaddress(id)
   
    // 提示
    uni.showToast({title:'删除地址成功'})
   setTimeout(() => {
      // 获取最新数据
      this.getmemberaddress()
   }, 400);
    }
 
 
  
    },
    // 获取当前点击的地址存入vuex中
  
    getaddress(item){
    // 获取到当前选中的地址存入vuex
    // 在填写订单页面,获取vuex中的地址进行渲染
      this.$store.commit('address/setselectedAddress',item)
      // 项目有两个地方可以进入到地址列表
      //填写订单页面选择地址和用户页面的地址管理中
     //如果是在填写订单页面进入,选中地址后则返回上一页
    //  在填写订单页面选择地址跳转地址列表页面时在路径上传入了参数
    // 在用户页面进入地址页面没有在路径传递参数
    // 根据路径的参数来判断当前访问页面
    //获取页面栈
    const pages = getCurrentPages()
    // 获取路径上的参数
    const {from} = pages[pages.length-1].options
    // 如果点击当前列表中的一项
    // 则将选择的地址存入vuex中
    // 如果进入当前页面时,路径带了参数选择地址后则返回上一页
    // 如果没有则不返回上一页
    if(from){
      uni.navigateBack()
    }
    
    }
    },

};
</script>


<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}
.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f4f4f4;
  scroll-view {
    padding-top: 20rpx;
  }
}
.address {
  padding: 0 20rpx;
  margin: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  .item {
    line-height: 1;
    padding: 40rpx 10rpx 38rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    .user {
      font-size: 28rpx;
      margin-bottom: 20rpx;
      color: #333;
      text {
        color: #666;
      }
      .badge {
        display: inline-block;
        padding: 4rpx 10rpx 2rpx 14rpx;
        margin: 2rpx 0 0 10rpx;
        font-size: 26rpx;
        color: #27ba9b;
        border-radius: 6rpx;
        border: 1rpx solid #27ba9b;
      }
    }
    .locate {
      line-height: 1.6;
      font-size: 26rpx;
      color: #333;
    }
    .edit {
      position: absolute;
      top: 36rpx;
      right: 30rpx;
      padding: 2rpx 0 2rpx 20rpx;
      border-left: 1rpx solid #666;
      font-size: 26rpx;
      color: #666;
      line-height: 1;
    }
  }
  .swipe-cell {
    &:last-child {
      .item {
        border: none;
      }
    }
  }
}
.swipe-cell-action {
  height: 100%;
  .delete-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 100%;
    font-size: 28rpx;
    color: #fff;
    border-radius: 0;
    padding: 0;
    background-color: #cf4444 !important;
  }
}
.add-btn {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
.blank {
  margin-top: 300rpx;
  text-align: center;
  font-size: 32rpx;
  color: #888;
}
</style>